<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08_SVG-绘制图片和文字</title>
  <!-- 
  在 SVG（可缩放矢量图形）中，绘制图片和文字是非常常见的需求。
  1. 绘制图片
  使用  `<image>`  元素可以在 SVG 中插入位图图像。
   示例：
  <svg width="200" height="200">
    <image href="path/to/image.jpg" x="10" y="10" width="180" height="180" />
  </svg>
  - 属性：
    -  `href` ：指定图片的路径，可以是相对路径或绝对路径。
    -  `x`  和  `y` ：定义图片左上角的坐标。
    -  `width`  和  `height` ：定义图片的宽度和高度。

  2. 绘制文字
  使用  `<text>`  元素可以在 SVG 中绘制文本。
   示例：
  <svg width="200" height="200">
    <text x="10" y="50" fill="black" font-size="20">Hello, SVG!</text>
  </svg>
  - 属性：
    -  `x`  和  `y` ：定义文本起始位置的坐标。
    -  `fill` ：文本的填充颜色。
    -  `font-size` ：文本的字体大小。
    - 还可以使用其他属性，如  `font-family` 、 `font-weight`  等来进一步控制文本的样式。

  3. 文本样式
  可以使用 CSS 样式或直接在  `<text>`  元素中添加属性来控制文本的样式。
   示例：
  <svg width="200" height="200">
    <text x="10" y="50" fill="blue" font-size="20" font-family="Arial" font-weight="bold">
      Styled Text
    </text>
  </svg>
  4. 文本换行
  SVG 中的文本不会自动换行。如果需要换行，可以使用  `<tspan>`  元素。
   示例：
  <svg width="200" height="200">
    <text x="10" y="20" font-size="16" fill="black">
      This is a text
      <tspan x="10" dy="20">with a line break.</tspan>
    </text>
  </svg>
  5. 总结
  在 SVG 中，使用  `<image>`  元素可以插入位图图像，而使用  `<text>`  元素可以绘制文本。通过设置各种属性，可以灵活地控制图像和文本的外观和位置。SVG 的可缩放性和可编辑性使其非常适合用于网页和图形设计。
  -->
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }

    body{
      background-image: url(../../images/grid.png);
    }
    svg{
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>

  <h2>一. 绘制图片</h2>
  <h3>1. svg 2.0版本的语法</h3>
  <svg 
    width="200" 
    height="200"
    xmlns="http://www.w3.org/2000/svg"
  >
    <image 
      href="../../images/googlelogo_color_92x30dp.png"
      x="0"
      y="0"
      width="200"
      height="200"
    ></image>
  </svg>

  <h3>2. svg 1.0版本的语法</h3>
  <svg
    version="1.0"
    baseProfile="full"
    width="200"
    height="200"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <image 
      href="../../images/googlelogo_color_92x30dp.png"
      x="0"
      y="0"
      width="200"
      height="200"
    ></image>
  </svg>

  <h3>3. svg 2.0 + 1.0 版本的语法( 为了兼容以前的浏览器的写法 )</h3>
  <svg 
    width="200" 
    height="200"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
  >
    <image
      href="../../images/googlelogo_color_92x30dp.png"
      xlink:href="../../images/googlelogo_color_92x30dp.png"
      x="0"
      y="0"
      width="200"
      height="200"
    ></image>
  </svg>

  <h2>二. 绘制文字</h2>
  <h3>1. text</h3>
  <svg
    width="200"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- 1.在svg中绘制一个文字 -->
    <!-- <text x="10" y="50" font-size="30" fill="red">Hello SVG</text> -->

    <!-- 2.文本的对齐方式 -->
    <!-- <text x="100" y="100" text-anchor="middle"  font-size="50" fill="red">Ay</text> -->

    <!-- 3.基线对齐方式 :
      有 auto 、middle 或 hanging 值, 默认值：auto
    -->
    <text x="100" y="40" dominant-baseline="middle" font-size="30" fill="red">Ay</text>
  </svg>

  <h3>2. 绘制-文字-tspan</h3>
  <svg
    width="200"
    height="100"
    xmlns="http://www.w3.org/2000/svg"
  >
    <text x="10" y="50" font-size="20" fill="red">
      iPhone14 <tspan fill="blue">¥100</tspan>
    </text>
  </svg>
  
</body>
</html>